<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE>
<html>
    <head>
        <title>会员注册</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8" />
        <%@ include file="/WEB-INF/view/common/pace.jsp"%>
    </head>
<body class="bg-1">
    <!-- 导航栏	start -->
    <jsp:include page="/WEB-INF/view/common/header.jsp" />
    
    <!-- 动画 start -->
    <div role="main" class="site clearfix">
        <div class="context-loader-container" id="site-container">
            <section class="aws-section" id="aws">
                <div class="leaf-header-container">
                    <div class="bg-animation">
                        <img width="300" src="<c:url value="/resources/images/cloud-1.png"/>" class="cloud cloud-1" alt="Cloud-1"/> 
                        <img width="347" src="<c:url value="/resources/images/cloud-2.png"/>" class="cloud cloud-2" alt="Cloud-2"/> 
                        <img width="50" src="<c:url value="/resources/images/corel.png"/>" class="cloud corel" alt="corel"/> 
                        <img width="470" src="<c:url value="/resources/images/cloud-3.png"/>" class="cloud cloud-3" alt="Cloud-3"/> 
                        <img width="762" src="<c:url value="/resources/images/cloud-4.png"/>" class="cloud cloud-4" alt="Cloud-4"/> 
                        <img width="587" src="<c:url value="/resources/images/cloud-5.png"/>" class="cloud cloud-5" alt="Cloud-5"/> 
                        <img width="857" src="<c:url value="/resources/images/cloud-6.png"/>" class="cloud cloud-6" alt="Cloud-6"/>
                    </div>
                    <div class="htmleaf-header-content">
                        <h2>J2EE技术分享<br> 自由分享 源码、Demo下载、高级技术实例教程</h2>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <!-- 动画 end -->
    
    
    <div class='container' style="width: 26%;">
        <form class='form-signin' role='form' action="javascript:register()">
            <h2 class='form-signin-heading' style="text-align: center;">会员注册</h2>
            <div class="input-group">
                <input type='text' class='form-control' name="userName" placeholder="输入你的用户名" required autofocus />
                <div class="input-group-addon">
                    <i class="fa fa-user"></i>
                </div>
            </div>
            <div style='height: 30px; clear: both; display: block'></div>
            <div class="input-group">
                <input type='password' name="password" class='form-control' placeholder="输入你的密码" required>
                <div class="input-group-addon">
                    <i class="fa fa-key"></i>
                </div>
            </div>
            <div style='height: 30px; clear: both; display: block'></div>
            <div class="input-group">
                <input type='password' name="passwordOk" class='form-control' placeholder="输入你的确认密码" required>
                <div class="input-group-addon">
                    <i class="fa fa-key"></i>
                </div>
            </div>
            <div style='height: 30px; clear: both; display: block'></div>
            <div class="input-group">
                <input type="text" name="email" class='form-control' placeholder="输入你的邮箱" required>
                <div class="input-group-addon">
                    <i class="fa fa-envelope-o"></i>
                </div>
            </div>
            <div style='height: 30px; clear: both; display: block'></div>
            <div class="input-group">
                <input type='text' name="phone" class='form-control' placeholder="输入你的手机号">
                <div class="input-group-addon">
                    <i class="fa fa-phone"></i>
                </div>
            </div>
            <div style='height: 30px; clear: both; display: block'></div>
            <div class="input-group">
                <input type='text' name="realName" class='form-control' placeholder="输入你的真实姓名">
                <div class="input-group-addon">
                    <i class="fa fa-pencil-square-o"></i>
                </div>
            </div>
            <span style="color: red; font-size: 14px;height: 20px;">&nbsp;</span>
            <div style='height: 30px; clear: both; display: block'></div>
            <button class='btn btn-lg btn-primary btn-block' type="submit" data-loading-text="注册中...">注册</button>
        </form>
    </div>
    
    <input name="registerUrl" type="hidden" value="<c:url value="/register"/>"/>
    <input id="toLoginUrl" type="hidden" value="<c:url value="/toLogin"/>"/>
    
    <script type="text/javascript">
        function register(){
            $(".btn-primary").button("loading");
            
            userName = $("input[name='userName']").val();
            password = $("input[name='password']").val();
            passwordOk = $("input[name='passwordOk']").val();
            email = $("input[name='email']").val();
            phone = $("input[name='phone']").val();
            realName = $("input[name='realName']").val();
            $.ajax({
                type : "post",
                dataType : "json",
                async : false,
                url : $("input[name='registerUrl']").val(),
                data : {
                    "userName" : userName,
                    "password" : password,
                    "passwordOk" : passwordOk,
                    "email" : email,
                    "phone" : phone,
                    "realName" : realName
                },
                success : function(result) {
                    if(result.code == 200){
                        $.model.alert("恭喜您注册成功，开始美好旅途吧^_^","",function(){
                            $(".btn-primary").button("reset");
                            window.location.href = $("#toLoginUrl").val();
                        });
                    }else{
                        $.model.alert(result.msg,"",function(){
                            $(".btn-primary").button("reset");
                        });
                    }
                }
            });
        }
    </script>
</body>
</html>

